<template>
    <div class="tab3">
        <RecycleScroller class="scroller" :items="list" :item-size="32" key-field="id" v-slot="{ item }">
            <div class="user">
                {{ item.name }}
            </div>
        </RecycleScroller>
    </div>

</template>

<script>
export default {
    data() {
        return {
            list: new Array(10000).fill(0).map((item, index) => ({ id: index, name: `User ${index}` }))
        }
    }
}
</script>

<style scoped>
.tab3 {
    height: 800px;
}

.scroller {
    height: 100%;
}

.user {
    height: 32%;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
</style>